<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将原生事件绑定到组件</title>
    <script src="../public/vue2.7.14-dev.js"></script>
</head>
<body>
    <div id="app">
        <!-- 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符： -->
        <base-input v-on:focus.native="onFocus"></base-input>
    </div>


    <script>
        /* 我发现一个问题，好像这里的全局注册需要在new Vue之前写上！！！ */
         Vue.component('base-input',{
            template:`<input
            v-bind:value="value"
        />`,
        data() {
            return {
                value:'hello'
            }
        },
        })

        new Vue({
            el:"#app",
            methods: {
                onFocus(){
                    console.log("原生focus触发！");
                }
            },
        })

       
    </script>
</body>
</html>